<template>
  <div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 sm:pt-16 pt-12">
    <!-- 页面标题 -->
    <div class="pt-20 pb-8 bg-[#E30314]  from-red-600 to-red-800">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center">
          <h1 class="text-4xl md:text-5xl font-bold text-white mb-4">
            {{ pageData.title }}
          </h1>
          <p class="text-xl text-blue-100 max-w-3xl mx-auto">
            {{ pageData.subtitle }}
          </p>
        </div>
      </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
      <!-- 物业总部合作企业 -->
      <div class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
            {{ propertySection.title }}
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            {{ propertySection.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 合作企业卡片 -->
          <div 
            v-for="(company, index) in propertySection.companies" 
            :key="index"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="h-48" :class="company.gradient">
              <div class="flex items-center justify-center h-full">
                <div class="text-center text-white">
                  <div class="text-4xl mb-2">{{ company.icon }}</div>
                  <div class="text-lg font-semibold">{{ company.category }}</div>
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-3">{{ company.name }}</h3>
              <p class="text-gray-600 mb-4">{{ company.description }}</p>
              <div class="flex flex-wrap gap-2">
                <span 
                  v-for="(tag, tagIndex) in company.tags" 
                  :key="tagIndex"
                  class="px-3 py-1 rounded-full text-sm"
                  :class="tag.class">
                  {{ tag.text }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 合作统计数据 -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6">
          <div 
            v-for="(stat, index) in propertySection.stats" 
            :key="index"
            class="bg-white rounded-lg p-6 text-center shadow-md">
            <div class="text-3xl font-bold text-[#E30314] mb-2">{{ stat.value }}</div>
            <div class="text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- 体育器材供应商 -->
      <div class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
            {{ equipmentSection.title }}
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            {{ equipmentSection.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
          <!-- 主要供应商 -->
          <div 
            v-for="(supplier, index) in equipmentSection.mainSuppliers" 
            :key="index"
            class="bg-white rounded-xl shadow-lg overflow-hidden">
            <div class="h-64 relative" :class="supplier.gradient">
              <div class="absolute inset-0 bg-black bg-opacity-30"></div>
              <div class="absolute inset-0 flex items-center justify-center">
                <div class="text-center text-white">
                  <div class="text-6xl mb-4">{{ supplier.icon }}</div>
                  <div class="text-2xl font-bold">{{ supplier.category }}</div>
                </div>
              </div>
            </div>
            <div class="p-8">
              <h3 class="text-2xl font-bold text-gray-800 mb-4">{{ supplier.name }}</h3>
              <p class="text-gray-600 mb-6">{{ supplier.description }}</p>
              <div class="grid grid-cols-2 gap-4 mb-6">
                <div 
                  v-for="(stat, statIndex) in supplier.stats" 
                  :key="statIndex"
                  class="text-center">
                  <div class="text-2xl font-bold" :class="supplier.statColor">{{ stat.value }}</div>
                  <div class="text-sm text-gray-500">{{ stat.label }}</div>
                </div>
              </div>
              <div class="flex flex-wrap gap-2">
                <span 
                  v-for="(tag, tagIndex) in supplier.tags" 
                  :key="tagIndex"
                  class="px-3 py-1 rounded-full text-sm"
                  :class="tag.class">
                  {{ tag.text }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 其他供应商展示 -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-6">
          <div 
            v-for="(supplier, index) in equipmentSection.otherSuppliers" 
            :key="index"
            class="bg-white rounded-lg p-6 shadow-md text-center">
            <div class="text-4xl mb-4">{{ supplier.icon }}</div>
            <h4 class="text-lg font-bold text-gray-800 mb-2">{{ supplier.name }}</h4>
            <p class="text-gray-600 text-sm mb-4">{{ supplier.description }}</p>
            <div class="text-blue-600 font-semibold">{{ supplier.specialty }}</div>
          </div>
        </div>

        <!-- 供应商统计数据 -->
        <div class="mt-12 bg-[#E30314]  rounded-xl p-8 text-white">
          <div class="grid grid-cols-1 md:grid-cols-4 gap-6 text-center">
            <div 
              v-for="(stat, index) in equipmentSection.supplierStats" 
              :key="index">
              <div class="text-3xl font-bold mb-2">{{ stat.value }}</div>
              <div class="text-green-100">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 安全保险合作 -->
      <div class="mb-16">
        <div class="text-center mb-12">
          <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">
            {{ insuranceSection.title }}
          </h2>
          <p class="text-lg text-gray-600 max-w-3xl mx-auto">
            {{ insuranceSection.subtitle }}
          </p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 保险合作卡片 -->
          <div 
            v-for="(insurance, index) in insuranceSection.partners" 
            :key="index"
            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300">
            <div class="h-48" :class="insurance.gradient">
              <div class="flex items-center justify-center h-full">
                <div class="text-center text-white">
                  <div class="text-4xl mb-2">{{ insurance.icon }}</div>
                  <div class="text-lg font-semibold">{{ insurance.category }}</div>
                </div>
              </div>
            </div>
            <div class="p-6">
              <h3 class="text-xl font-bold text-gray-800 mb-3">{{ insurance.name }}</h3>
              <p class="text-gray-600 mb-4">{{ insurance.description }}</p>
              <div class="space-y-3">
                <div 
                  v-for="(feature, featureIndex) in insurance.features" 
                  :key="featureIndex"
                  class="flex items-center">
                  <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                  <span class="text-sm text-gray-600">{{ feature }}</span>
                </div>
              </div>
              <div class="mt-4 flex flex-wrap gap-2">
                <span 
                  v-for="(tag, tagIndex) in insurance.tags" 
                  :key="tagIndex"
                  class="px-3 py-1 rounded-full text-sm"
                  :class="tag.class">
                  {{ tag.text }}
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- 保险统计数据 -->
        <div class="mt-12 grid grid-cols-1 md:grid-cols-4 gap-6">
          <div 
            v-for="(stat, index) in insuranceSection.stats" 
            :key="index"
            class="bg-white rounded-lg p-6 text-center shadow-md">
            <div class="text-3xl font-bold text-green-600 mb-2">{{ stat.value }}</div>
            <div class="text-gray-600">{{ stat.label }}</div>
          </div>
        </div>
      </div>

      <!-- 合作优势 -->
      <div class="mt-16 bg-[#E30314]  rounded-xl p-8 text-white">
        <div class="text-center mb-8">
          <h3 class="text-2xl font-bold mb-4">{{ advantagesSection.title }}</h3>
          <p class="text-blue-100">{{ advantagesSection.subtitle }}</p>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div 
            v-for="(advantage, index) in advantagesSection.items" 
            :key="index"
            class="text-center">
            <div class="text-4xl mb-4">{{ advantage.icon }}</div>
            <h4 class="text-lg font-bold mb-2">{{ advantage.title }}</h4>
            <p class="text-blue-100 text-sm">{{ advantage.description }}</p>
          </div>
        </div>
      </div>

      <!-- 联系我们 -->
      <div class="text-center mt-16">
        <h3 class="text-2xl font-bold text-gray-800 mb-4">{{ contactSection.title }}</h3>
        <p class="text-gray-600 mb-6">{{ contactSection.description }}</p>
        <router-link
          :to="contactSection.button.link"
          class="inline-block bg-[#E30314]  text-white px-8 py-3 rounded-lg font-semibold hover:bg-blue-700 transition-colors duration-200">
          {{ contactSection.button.text }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 页面配置数据
const pageData = ref({
  title: '战略合作伙伴',
  subtitle: '携手优质合作伙伴，共创运动服务新未来'
})

// 物业总部合作企业配置
const propertySection = ref({
  title: '物业总部合作企业',
  subtitle: '与知名物业集团建立战略合作关系，为社区居民提供专业运动服务',
  companies: [
    {
      name: '万科物业',
      category: '物业管理',
      description: '与万科物业深度合作，为旗下社区提供专业运动服务，覆盖全国多个城市',
      icon: '🏢',
      gradient: 'from-blue-400 to-blue-600',
      tags: [
        { text: '合作项目: 50+', class: 'bg-blue-100 text-blue-800' },
        { text: '服务社区: 200+', class: 'bg-green-100 text-green-800' }
      ]
    },
    {
      name: '保利物业',
      category: '物业服务',
      description: '与保利物业建立长期合作关系，提供定制化运动服务解决方案',
      icon: '🏘️',
      gradient: 'from-green-400 to-green-600',
      tags: [
        { text: '合作项目: 30+', class: 'bg-green-100 text-green-800' },
        { text: '服务居民: 15000+', class: 'bg-purple-100 text-purple-800' }
      ]
    },
    {
      name: '碧桂园物业',
      category: '社区服务',
      description: '与碧桂园物业合作，打造高品质社区运动文化，提升居民生活品质',
      icon: '🏡',
      gradient: 'from-purple-400 to-purple-600',
      tags: [
        { text: '合作项目: 40+', class: 'bg-purple-100 text-purple-800' },
        { text: '覆盖城市: 25+', class: 'bg-orange-100 text-orange-800' }
      ]
    }
  ],
  stats: [
    { value: '120+', label: '合作项目' },
    { value: '500+', label: '服务社区' },
    { value: '50+', label: '覆盖城市' },
    { value: '100000+', label: '服务居民' }
  ]
})

// 体育器材供应商配置
const equipmentSection = ref({
  title: '体育器材供应商',
  subtitle: '与知名体育器材品牌合作，确保活动器材质量和安全性',
  mainSuppliers: [
    {
      name: '李宁体育',
      category: '运动装备',
      description: '与李宁体育建立战略合作关系，为各类运动活动提供专业装备支持，确保产品质量和安全性。',
      icon: '🏃‍♂️',
      gradient: 'bg-gradient-to-br from-red-400 to-red-600',
      statColor: 'text-red-600',
      stats: [
        { value: '1000+', label: '装备种类' },
        { value: '50+', label: '合作项目' }
      ],
      tags: [
        { text: '专业认证', class: 'bg-red-100 text-red-800' },
        { text: '质量保证', class: 'bg-blue-100 text-blue-800' },
        { text: '售后服务', class: 'bg-green-100 text-green-800' }
      ]
    },
    {
      name: '安踏体育',
      category: '运动服装',
      description: '与安踏体育合作，为参与活动的用户提供舒适、专业的运动服装，提升运动体验。',
      icon: '👕',
      gradient: 'bg-gradient-to-br from-blue-400 to-blue-600',
      statColor: 'text-blue-600',
      stats: [
        { value: '500+', label: '服装款式' },
        { value: '30+', label: '合作赛事' }
      ],
      tags: [
        { text: '舒适面料', class: 'bg-blue-100 text-blue-800' },
        { text: '时尚设计', class: 'bg-purple-100 text-purple-800' },
        { text: '快速配送', class: 'bg-orange-100 text-orange-800' }
      ]
    }
  ],
  otherSuppliers: [
    {
      name: '耐克体育',
      description: '提供专业运动鞋和运动装备',
      icon: '👟',
      specialty: '运动鞋专家'
    },
    {
      name: '阿迪达斯',
      description: '提供专业运动服装和装备',
      icon: '🎽',
      specialty: '运动服装'
    },
    {
      name: '斯伯丁',
      description: '提供专业篮球和运动器材',
      icon: '🏀',
      specialty: '篮球器材'
    }
  ],
  supplierStats: [
    { value: '10+', label: '合作品牌' },
    { value: '5000+', label: '器材种类' },
    { value: '100+', label: '合作项目' },
    { value: '99.9%', label: '质量合格率' }
  ]
})

// 安全保险合作配置
const insuranceSection = ref({
  title: '安全保险合作',
  subtitle: '与知名保险公司合作，为所有活动提供安全保障',
  partners: [
    {
      name: '中国人寿保险',
      category: '人身保险',
      description: '与中国人寿保险合作，为参与活动的用户提供人身意外保险，确保活动安全。',
      icon: '🛡️',
      gradient: 'from-green-400 to-green-600',
      features: [
        '人身意外保险',
        '医疗费用报销',
        '24小时理赔服务'
      ],
      tags: [
        { text: '保额: 50万', class: 'bg-green-100 text-green-800' },
        { text: '覆盖: 100%', class: 'bg-blue-100 text-blue-800' }
      ]
    },
    {
      name: '平安保险',
      category: '责任保险',
      description: '与平安保险合作，为活动组织方提供责任保险，降低运营风险。',
      icon: '🔒',
      gradient: 'from-blue-400 to-blue-600',
      features: [
        '活动责任保险',
        '财产损失保险',
        '法律费用保障'
      ],
      tags: [
        { text: '保额: 100万', class: 'bg-blue-100 text-blue-800' },
        { text: '响应: 2小时', class: 'bg-green-100 text-green-800' }
      ]
    },
    {
      name: '太平洋保险',
      category: '综合保险',
      description: '与太平洋保险合作，提供综合保险解决方案，全方位保障活动安全。',
      icon: '🌊',
      gradient: 'from-purple-400 to-purple-600',
      features: [
        '综合保险方案',
        '快速理赔服务',
        '专业风险评估'
      ],
      tags: [
        { text: '保额: 200万', class: 'bg-purple-100 text-purple-800' },
        { text: '服务: 7×24', class: 'bg-orange-100 text-orange-800' }
      ]
    }
  ],
  stats: [
    { value: '100%', label: '活动覆盖率' },
    { value: '0', label: '安全事故' },
    { value: '500万+', label: '累计保额' },
    { value: '24小时', label: '理赔响应' }
  ]
})

// 合作优势配置
const advantagesSection = ref({
  title: '合作优势',
  subtitle: '通过战略合作，为客户提供更优质、更安全的运动服务',
  items: [
    {
      icon: '🤝',
      title: '强强联合',
      description: '与行业领先企业合作，整合优质资源'
    },
    {
      icon: '🛡️',
      title: '安全保障',
      description: '全方位保险保障，确保活动安全无忧'
    },
    {
      icon: '⚡',
      title: '高效服务',
      description: '专业团队快速响应，提供优质服务体验'
    }
  ]
})

// 联系我们配置
const contactSection = ref({
  title: '想要建立合作？',
  description: '联系我们，探讨战略合作机会，共创美好未来',
  button: {
    text: '立即咨询',
    link: '/contact'
  }
})

onMounted(() => {
  console.log('Cooperate page loaded')
})
</script>

<style scoped>
/* 响应式优化 */
@media (max-width: 768px) {
  .grid {
    gap: 1rem;
  }
  
  .p-8 {
    padding: 1.5rem;
  }
  
  .text-4xl {
    font-size: 2rem;
  }
  
  .text-3xl {
    font-size: 1.875rem;
  }
}

/* 动画效果 */
.bg-white {
  transition: all 0.3s ease;
}

.bg-white:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style> 